<template>
  <view class="main-box">
    <view class="content-body">
      <view class="banner box-shadow">
        <u-image width="100%" height="100%" :src="src" />
      </view>
      <u-card :border-radius="10" box-shadow="2px 2px 6px rgba(0, 0, 0, .3)" class="form-box">
        <template #body>
          <view class="">
            <view class="title">
              开通支付
            </view>
            <view class="sub-title">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod
            </view>
            <view class="">
              <u-form ref="form1" :model="form">
                <u-form-item prop="name">
                  <u-input v-model="form.name" :border="true" placeholder="手机号" />
                </u-form-item>
                <u-form-item prop="code">
                  <u-input v-model="form.code" :border="true" placeholder="获取验证码" />
                  <u-button type="warning" size="medium" @click="getCode">获取</u-button>
                </u-form-item>
                <u-form-item prop="intro">
                  <u-input v-model="form.intro" :border="true" placeholder="邀请码" />
                </u-form-item>
                <u-form-item prop="password">
                  <u-input v-model="form.password" :border="true" placeholder="输入密码" type="password" :password-icon="true" />
                </u-form-item>
                <u-form-item prop="password1">
                  <u-input v-model="form.password1" :border="true" placeholder="确认密码" type="password" :password-icon="true" />
                </u-form-item>
              </u-form>
            </view>
          </view>
        </template>
        <template #foot>
          <view class="">
            <u-button type="primary" @click="submit">马上注册</u-button>
          </view>
        </template>
      </u-card>
    </view>
	
    <view class="foot">
      <foot-box />
    </view>
  </view>
</template>
<script setup name='register'>
import { reactive, toRefs, ref, getCurrentInstance } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
import footBox from '@/components/foot-box/index.vue'

const src = ref('/static/images/cs.png')
const { proxy } = getCurrentInstance()

const form = ref({})
const rules = ref({
    name: [
        {
            required: true,
            message: '请输入姓名',
            trigger: ['blur', 'change']
        }
    ]
})
const form1 = ref()
const submit = () => {
    proxy.$refs.form1.validate(valid => {
        if (valid) {
            console.log('验证通过')
        } else {
            console.log('验证失败')
        }
    })
}

onLoad((options) => {
    console.log('页面加载时的参数：', options)
})
onReady(() => {
    proxy.$refs.form1.setRules(rules.value)
})

</script>
<style lang='scss' scoped>
	@import "../../common/index.css";
	.title,.sub-title{
		text-align: center;
	}
	.title{
		font-size: 42rpx;
		font-weight:700;
		color: rgb(140,140,140);
		padding-bottom: 20rpx;
	}
	.sub-title{
		padding-bottom: 20rpx;
	}
</style>
